import React, { useState } from 'react';
import { message } from 'antd';
import { XFlow, XFlowCanvas } from '@antv/xflow';
import { CanvasScaleToolbar, CanvasMiniMap, CanvasSnapline } from '@antv/xflow';
import { useGraphConfig } from './config-graph';
import styles from './MainCanvas.less';

export default function MainCanvas() {
  /** 画布配置 */
  const graphConfig = useGraphConfig();

  /** 画布渲染数据 */
  const [graphData, setGraphData] = useState(null);

  /** XFlow初始化完成的回调 */
  const onLoad = async (app) => {
    const nodes = [
      { id: 'root1', width: 150, height: 40, renderKey: 'NODE1', info: { text: 'root1' } },
      { id: 'down1', width: 150, height: 40, renderKey: 'NODE2', info: { text: 'down1' } },
      { id: 'down2', width: 150, height: 40, renderKey: 'NODE2', info: { text: 'down2' } },
      { id: 'down3', width: 150, height: 40, renderKey: 'NODE2', info: { text: 'down3' } },
    ];
    const edges = [
      {
        id: 'root1-down1',
        source: 'root1',
        target: 'down1',
        renderKey: 'EDGE1',
        edgeContentWidth: 60,
        edgeContentHeigt: 30,
        info: { line: 'root1-down1' },
      },
      {
        id: 'root1-down2',
        source: 'root1',
        target: 'down2',
        renderKey: 'EDGE2',
        edgeContentWidth: 60,
        edgeContentHeigt: 30,
        info: { line: 'root1-down2' },
      },
      {
        id: 'root1-down3',
        source: 'root1',
        target: 'down3',
        label: '1:N(纯文本)',
        info: { line: 'root1-down3' },
      },
    ];
    const newGraphData = { nodes, edges };
    setGraphData(newGraphData);

    const graph = await app.getGraphInstance();
    graph.on('node:click', ({ node }) => {
      const nodeData = node.getData();
      message.success(`${nodeData.id}节点被点击了`);
    });
    graph.on('edge:click', ({ edge }) => {
      edge.toFront();
      const edgeData = edge.getData();
      message.success(`${edgeData.id}连线被点击了`);
    });
  };

  return (
    <XFlow
      className={styles.xflowUerContainer}
      graphData={graphData}
      graphLayuot={{
        layoutType: 'dagre',
        layoutOptions: {
          type: 'dagre',
          rankdir: 'TB',
          nodesep: 60,
          ranksep: 40,
        },
      }}
      onLoad={onLoad}
      isAutoCenter={true}
    >
      <XFlowCanvas config={graphConfig}>
        {/** 工具栏 */}
        {/* <CanvasScaleToolbar position={{ top: 0, bottom: 0, left: 0, right: 0 }} /> */}
        {/** 小地图  */}
        {/* <CanvasMiniMap
            miniMapClz="xflow-custom-minimap"
            nodeFillColor="#ccc"
            minimapOptions={{
              width: 200,
              height: 120,
            }}
            position={{ top: 12, right: 12 }}
          /> */}
        {/** 对齐线 */}
        <CanvasSnapline color="#1890ff" />
      </XFlowCanvas>
    </XFlow>
  );
}
